<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <p>总金额：{{totalPrice}}</p>
    <table border="1">
      <thead>
        <tr>
          <th colspan="7">2021淘宝+京东+PDD</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input type="checkbox" v-model="checkAll" @change="selectAll">
            全选
          </td>
          <td>名称</td>
          <td>图片</td>
          <td>价格</td>
          <td>数量</td>
          <td>小计</td>
          <td>操作</td>
        </tr>
        <tr v-for="(item, index) in goodslist" :key="index">
          <td>
            <input type="checkbox" v-model="item.checked" @change="selectItem">
          </td>
          <td>{{item.goodsname}}</td>
          <td>
            <img :src="item.goodsimg" width="100">
          </td>
          <td>{{item.price}}</td>
          <td>
            <button @click="del(index)">-</button>
            {{item.num}}
            <button @click="add(index)">+</button>
          </td>
          <td>￥{{(item.num * item.price).toFixed(2)}}元</td>
          <td>
            <button>删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <script src="../vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        // 是否全选
        checkAll: false,
        goodslist: [
          {
            id: 1,
            goodsname: "vivo IQ777",
            goodsimg:
              "https://img12.360buyimg.com/seckillcms/s280x280_jfs/t1/166249/4/1781/100467/5ffc0654Eb618aa21/2188e4ef3f6abe7e.jpg.webp",
            price: 2999,
            num: 1,
            checked: false
          },
          {
            id: 2,
            goodsname: "小米10",
            goodsimg:
              "https://img10.360buyimg.com/seckillcms/s280x280_jfs/t1/97161/40/12127/66234/5e440190E7cd0f54e/33627b2c39a67241.jpg.webp",
            price: 998,
            num: 1,
            checked: false
          },
          {
            id: 3,
            goodsname: "传世的珐琅锅",
            goodsimg:
              "https://img20.360buyimg.com/seckillcms/s280x280_jfs/t1/168750/15/16697/127861/606c22c0Eca19515e/5adfe8e452fffbff.png.webp",
            price: 1768,
            num: 1,
            checked: false
          },
          {
            id: 4,
            goodsname: "蔻驰的丑包",
            goodsimg:
              "https://img12.360buyimg.com/ceco/s300x300_jfs/t1/119430/19/3585/133796/5eb12fe7E1a4ee264/392d83858bb8cd52.jpg!q70.jpg.webp",
            price: 17865,
            num: 1,
            checked: false
          },
        ]
      },
      computed: {
        totalPrice() {
          // 选中的商品才会参与计算
          let num = 0;
          this.goodslist.forEach(item => {
            if(item.checked) {
              num += item.price * item.num
            }
          });
          return num
        }
      },
      methods: {
        del(index) {
          if (this.goodslist[index].num > 1) {
            this.goodslist[index].num--
          }
        },
        add(index) {
          this.goodslist[index].num++
        },
        // 全选的修改
        selectAll() {
          // 遍历数组，将全选框的值赋值给每一项
          this.goodslist.forEach(item => {
            item.checked = this.checkAll
          })
        },
        // 每一项的修改，都要遍历数组
        selectItem() {
          this.checkAll = this.goodslist.every(item => {
            return item.checked
          })
        }
      },
    })
  </script>
</body>

</html>